<template>
    <div class="selection-root">
        <el-tabs
          tab-position="left"
          style="height: 450px;"
          class="demo-tabs" 
          :stretch="true"
          @mouseleave="mouseleave"
        >
            <el-tab-pane 
              v-for="(item, index) in categoryList" :key="index"
            >
              <template #label>
                <div 
                  :id="`${index}`"
                  @mouseenter="mouseenter" 
                  style="height: 40px;width: 100%;display: flex;justify-content: start;align-items: center;"
                >
                  <!-- <img :src="server_baseUrl+item.iconUrl" style="width: 15px;height: 15px;margin-right: 10px;"/> -->
                  <span class="text-item" v-for="(title,titleIndex) in item.category_title" :key="titleIndex">
                    {{ title }}
                    <el-divider v-if="titleIndex+1 != item.category_title.length" direction="vertical" />
                  </span>
                </div>
              </template>
              
                <div class="tabs-content" 
                  v-show="is_show"
                >
                  <div class="tabs-content-have" 
                    v-if="categoryList[currentHoverIndex].title_tags.length != 0"
                  >
                    <!-- 标签顶部top -->
                    <div class="tabs-content-tags" >
                      <span 
                        class="tabs-content-tags-item"
                        v-for="(tags,tagsIndex) in categoryList[currentHoverIndex].title_tags" 
                        :key="tagsIndex"
                      >
                         {{ tags }}
                         
                      </span>
                    </div>
  
  
                    <!-- 标签内容 -->
                    <div class="tabs-content-name" v-for="(categoryName,nameIndex) in categoryList[currentHoverIndex].category_name" :key="nameIndex">
                      <span class="content-name-title">
                        {{ categoryName.name }}
                        <el-icon><ArrowRight /></el-icon>
                      </span>
                      <div class="content-name-content" >
                        <span 
                          class="content-name-content-item"
                          v-for="(content,contentIndex) in categoryName.content" :key="contentIndex">
                          {{ content }}
                          <span>&nbsp;&nbsp;&nbsp;</span>
                        </span>
                        
                      </div>
                    </div>
                  </div>
                  <div v-else style="width: 100%;display: flex;align-items: center;justify-content: center;">
                    <el-empty :image-size="200" />
                  </div>
                  
                </div>
                
            </el-tab-pane>
  
        </el-tabs>
    </div>
    
  
  </template>
  <script setup lang="js">
  
  import { onMounted, ref, watch,onBeforeUnmount} from 'vue';
  import TabsInstance from 'element-plus';
  import category from '@/utils/category';
//   import { server_baseUrl } from '@/config';
  import { ArrowRight } from '@element-plus/icons-vue';
  const tabPosition = ref<TabsInstance['tabPosition']>('left')
  
  const categoryList = ref([]);
  categoryList.value = category();
  // console.log("【解析后的categoryList】",categoryList.value);
  // let str = ['手机','运营商','数码']
  let is_show = ref(false);
  let currentHoverIndex = ref(0);

  /**
   *  监听鼠标在分类标签页item的移入事件
   *  展示对应分类标签页的标签
   */
  function mouseenter(e){
    is_show.value = true;
    currentHoverIndex.value = e.target.id;
  }
  //移出分类组件时
  function mouseleave(e){
    is_show.value = false;
  }
  
  
  
  // 新增代码：获取输入框位置
  const inputRef = ref(null)
  const listPosition = ref({
    top: '0px',
    left: '0px',
    width: '640px'
  })
  
  // 新增代码：计算定位
  const updatePosition = () => {
    if (inputRef.value) {
      const rect = inputRef.value.getBoundingClientRect()
      listPosition.value = {
        top: `${rect.bottom + window.scrollY + 8}px`,
        left: `${rect.left + window.scrollX}px`,
        width: `${rect.width}px`
      }
    }
  }
  
  // 新增代码：监听窗口变化
  onMounted(() => {
    inputRef.value = document.querySelector('.search-area-input')
    updatePosition()
    window.addEventListener('resize', updatePosition)
    window.addEventListener('scroll', updatePosition)
  })
  
  onBeforeUnmount(() => {
    window.removeEventListener('resize', updatePosition)
    window.removeEventListener('scroll', updatePosition)
  })
  
  </script>
  <style lang="scss" scoped>
  
  @import '../../assets/theme.scss';
  
  .selection-root{
    // width: 100%;
    display: flex;
    position: absolute;
    .text-item:hover{
      color: red;
    }
  
    .tabs-content{
      width: 1037px;
      height: 425px;
      font-size: 14px;
      padding: 10px;
      border-radius: 10px;
      background-color: rgb(255, 255, 255);
      border: 3px solid $theme-decorate-color;
      position: sticky;
      top: 20px;
      z-index: 9999;
      
  
      &.is_show{
        display: none;
      }
  
      .tabs-content-have{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: start;
        flex-wrap: wrap;
  
  
        .tabs-content-tags{
          width: 100%;
          display: flex;
          justify-content: start;
          flex-wrap: nowrap;
        }
        .tabs-content-tags-item{
          height: fit-content;
          width: fit-content;
          background-color: $theme-decorate-color-6;
          margin: 10px;
          padding: 2px 5px;
          
          border-radius: 5px;
        }
        .tabs-content-tags-item:hover{
          color: red;
          background-color: $theme-decorate-color-5;
          cursor: pointer;
        }
  
        .tabs-content-name{
          width: 100%;
          height: fit-content;
          display: flex;
          margin-top: 20px;
          flex-wrap: nowrap;
          align-items: start;
  
          .content-name-title{
            width: 80px;
            line-height: 30px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: nowrap;
            // background-color: burlywood;
            // margin-right: 10px;
            
          }
          .content-name-title:hover{
            color: red;
            cursor: pointer;
          } 
  
          .content-name-content{
            padding-left: 10px;
            font-size: 13px;
            display: flex;
            flex-wrap: wrap;
            align-items: start;
            justify-content: start;
            line-height: 30px;
            
            .content-name-content-item:hover{
              color: red;
              cursor: pointer;
            }
  
          }
        }
      }
  
      
    }
    
  }
  
  .el-tab-pane >>> .el-tabs__active-bar{
    // background-color: transparent;
    display: none;
    line-height: 30px;
    font-weight: 600;
    display: flex;
    cursor: pointer;
  }
  
  
   
  </style>